
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">媒体类型</span>
</h1>
<hr/>
<p class="intro">媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 </p>
<hr/>
<h2>媒体类型</h2>
<p>一些 CSS 属性只设计了某些媒体。例如 <strong>voice-family</strong> 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， <strong>font-size</strong> 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，<strong>sans-serif</strong> 字体比较适合在屏幕上阅读，而 <strong>serif</strong> 字体更容易在纸上阅读。</p>
<hr/>
<h2> @media 规则</h2>
<p> @media 规则允许在相同样式表为不同媒体设置不同的样式。</p>
<p>在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">screen</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-identifier">.test</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-reserved">font-family:</span><span class="hl-code">verdana</span><span class="hl-code">,</span><span class="hl-string">sans-serif</span><span class="hl-reserved"></span><span class="hl-code">;</span><span class="hl-reserved">font-size:</span><span class="hl-number">14</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">print</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-identifier">.test</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-reserved">font-family:</span><span class="hl-code">times</span><span class="hl-code">,</span><span class="hl-string">serif</span><span class="hl-reserved"></span><span class="hl-code">;</span><span class="hl-reserved">font-size:</span><span class="hl-number">10</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">screen</span><span class="hl-code">,</span><span class="hl-identifier">print</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-identifier">.test</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-reserved">font-weight:</span><span class="hl-string">bold</span><span class="hl-reserved"></span><span class="hl-code">;</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p><b>你可以自己尝试看看 !</b> 如果您使用的是 <strong>Mozilla / Firefox</strong> 或 IE5+ 打印此页，你会看到，媒体类型将使用另一种比其他文本字体大小小点的字体显示。</p>
<hr/>
<h2>其他媒体类型</h2>
<p><b>注意：</b>媒体类型名称不区分大小写。</p>
<table class="reference">
<tbody><tr>
<th>媒体类型</th>
<th>描述</th>
</tr>
<tr>
<td>all</td>
<td>用于所有的媒体设备。</td>
</tr>
<tr>
<td>aural</td>
<td>用于语音和音频合成器。</td>
</tr>
<tr>
<td>braille</td>
<td>用于盲人用点字法触觉回馈设备。</td>
</tr>
<tr>
<td>embossed</td>
<td>用于分页的盲人用点字法打印机。</td>
</tr>
<tr>
<td>handheld</td>
<td>用于小的手持的设备。</td>
</tr>
<tr>
<td>print</td>
<td>用于打印机。</td>
</tr>
<tr>
<td>projection</td>
<td>用于方案展示，比如幻灯片。</td>
</tr>
<tr>
<td>screen</td>
<td>用于电脑显示器。</td>
</tr>
<tr>
<td>tty</td>
<td>用于使用固定密度字母栅格的媒体，比如电传打字机和终端。</td>
</tr>
<tr>
<td>tv</td>
<td>用于电视机类型的设备。</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    